.searching {
  height: 600px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;

  &-round-1,
  &-round-2,
  &-round-3 {
    width: 100px;
    height: 100px;
    background-color: #4a93e3;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
    animation: round1 2s ease infinite;
  }

  &-round-1 {
    animation-name: round1;
    animation-delay: 0;
  }

  &-round-2 {
    animation-name: round2;
    animation-delay: .3s;
  }

  &-round-3 {
    animation-name: round3;
    animation-delay: .6s;
  }

  &-center {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4a93e3;
    border-radius: 50%;
    z-index: 1;
  }

  &-bluetooth {
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
  }

  &-animation {
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    ;
  }

  &-text {
    margin-top: 20px;
    font-size: 28px;
  }

  &-progress {
    margin-top: 20px;
  }
}

@keyframes round1 {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate3d(-50%, -50%, 0) scale(5);
    opacity: 0;
  }
}

@keyframes round2 {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate3d(-50%, -50%, 0) scale(4);
    opacity: 0;
  }
}

@keyframes round3 {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate3d(-50%, -50%, 0) scale(3);
    opacity: 0;
  }
}